<script setup lang="ts">

import { onMounted } from "vue";
import api_blog from "@/api/blog/blog"
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getOptNameType } from "@/utils/utils";

const list = ref([] as any)
const total = ref(0)
const type = ref('' as any)
const routeValue = ref('' as any)
onMounted(async () => {
    getList()
})

let router = useRouter();
let route = useRoute();
type.value = route.query.type
routeValue.value = route.query.value

const navTo = (id: any) => {
    router.push({ path: "/read", query: { id } });
};

const getList = async () => {
    let query: any = { sortNoTop: true }

    type.value === 'type' ? query.type = routeValue.value : ''
    type.value === 'tag' ? query.tags = routeValue.value : ''

    let res = await api_blog.getlist({ ...query, sortNoTop: true })

    total.value = res.data.length

    let target = res.data.map((item: any) => {
        let year = item.createTime.slice(0, 4)
        let monthDay = item.createTime.slice(5, 10)
        return { 'createTime': item.createTime, 'title': item.title, '_id': item._id, year, monthDay }
    })
    //向数组中塞入纯 日期 以 分割时间线c
    if (target.length > 0) {
        target.splice(0, 0, { year: target[0].year, type: 'primary' })
    }
    target.forEach((item: any, index: number) => {
        if (index > 0 && item.year != target[index - 1].year) target.splice(index, 0, { year: item.year, size: 'normal', type: 'primary' })
    })
    //数据处理好后，像列表中置入标题
    let title = null
    if (!!type.value) {
        title = type.value === 'type' ? getOptNameType('blog_type', routeValue.value) : getOptNameType('blog_tag', routeValue.value)
    } else {
        title = `很好! 目前共计 ${total.value} 篇日志。 继续努力!`
    }

    target.unshift({ title, size: 'large', icon: 'InfoFilled', type: "success" })
    list.value = target
}

</script>
<template>
    <el-timeline style="padding-left: 20px;">
        <el-timeline-item v-for="(item, index) in list " :key="index" hide-timestamp :center="true" :size="item.size"
            :icon="item.icon" :type="item.type" :color="item.color">

            <div v-if="item.title && !item._id"
                :style="{ fontSize: type ? '24px' : '18px', fontWeight: '700', color: '#555' }">
                {{ item.title }} <span v-show="type" style="color: #BBB;font-weight: 700;">{{ type === 'type' ? '分类' :
                    '标签'
                    }}</span>
            </div>
            <div v-if="!item.title" style="font-size: 26px; font-weight: 700; padding: 20px 0;color:#555 ">
                {{ item.year }}
            </div>
            <div v-if="item._id" style="padding: 10px 0;">
                <el-link @click="navTo(item._id)" :underline="true">
                    <div style="font-size: 14px;margin-right: 10px;">
                        {{ item.monthDay }}
                    </div>
                    <div style="font-size: 16px;">
                        {{ item.title }}
                    </div>
                </el-link>
            </div>
        </el-timeline-item>
    </el-timeline>
</template>

<style></style>